<template>
    <div class="home-swipr">
        <van-search v-model="search" placeholder="请输入搜索关键词" input-align="center" @searc="onSearch" />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in bannerData" :key="index">
                <!-- <img :src="item.picUrl" alt=""> -->
                <van-image :src ="item.picUrl" lazy-load />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>
<script>
import { Toast } from 'vant';
//import axios from 'axios';
export default {
    data() {
        return {
            search:"",
            bannerData:[]
        };
    },
    methods: {
        onSearch(val) {
            Toast(val);
        },
        //获取轮播图数据
        getBanner(){
            this.$request("get","/recommend/banner")
            .then(res => {
                // console.log(res)
                if(res.result == 100){
                    this.bannerData = res.data;
                }
            })
            .catch(function(error){
                console.log(error)
            })
            /*axios.get("/api/recommend/banner")
            .then(response=>{
                console.log(response.data)
                const resData = response.data;//获取响应信息的数据值
                if(resData.result == 100 ){
                    this.bannerData = resData.data;
                }
                console.log(this.bannerData)
            })
            .catch(function (error){
                console.log(error);
            })*/
        }
    },
    created(){
        this.getBanner();
    },
    
};
</script>
<style scoped>
/*.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}*/
/* .my-swipe .van-swipe-item img{
    width: 100%;
} */
</style>